<template>
  <div class="order-detail">
    <!--  aa -->
    <van-nav-bar title="订单详情" left-arrow @click-left="$router.back()" class="nav-bar"></van-nav-bar>

    <div class="order-content common_scrollbar">
      <header class="detail-header">
        <img src="http://cba.itlike.com/public/mweb/static/order/status/wait_deliver.png" alt="">
        <h3>{{ order.state_text }}</h3>
      </header>
      <!-- 地址 -->
      <div class="address-detail common-card">
        <div class="info" v-if="order.address">
          <span class="name">{{order.address.name}}</span>
          <span class="phone">{{order.address.phone}}</span>
        </div>
        <div class="detail">
          {{order.address.region.province}} {{order.address.region.city}} {{order.address.region.region}} {{ order.address.detail }}
        </div>
      </div>

      <!--商品信息 -->
      <OrderItem v-for="item in order.goods" :key="item.goods_id" :item="item"></OrderItem>

      <!-- 订单信息 -->
      <div class="order-detail common-card">
        <table>
          <tr>
            <td>订单编号</td>
            <td>{{ order.order_no}}</td>
            <td><van-button size="small" type="default" class="copy_btn" @click="copy()">复制</van-button></td>
          </tr>
          <tr>
            <td>下单时间</td>
            <td>{{ order.pay_time }}</td>
            <td></td>
          </tr>
          <tr>
            <td>买家留言</td>
            <td v-show="order.buyer_remark !== ''">{{ order.buyer_remark }}</td>
            <td v-show="order.buyer_remark === ''">--</td>
            <td></td>
          </tr>
        </table>
      </div>

      <!-- 订单额外的信息 -->
      <div class="order-extra common-card">
        <div class="price-hd">
          <div class="common-hd">
            <span class="price_content left">订单金额</span>
            <span class="order_price right">￥{{ order.order_price }}</span>
          </div>
          <div class="common-hd">
            <span class="delivery_content left">运费</span>
            <span class="delivery_price right">+￥ {{ order.express_price }}</span>
          </div>
        </div>

        <!-- 实付款 -->
        <div class="real">
          <span class="real_content">实付款</span>
          <span class="real_price red">￥{{ order.pay_price }}</span>
        </div>
      </div>
    </div>

    <!-- 固定底部-申请取消 -->
    <div class="order-footer">
      <van-button type="default" class="footer_btn" @click="cancelOrder()">申请取消</van-button>
    </div>
  </div>
</template>

<script>
import OrderItem from '@/components/OrderItem'
import { orderDetail, cancelOrder } from '@/apis/order'
import { Toast, Dialog } from 'vant'
export default {
  components: { OrderItem },
  data () {
    return {
      orderId: this.$route.query.orderId,
      order: {},
      setting: {}
    }
  },
  async created () {
    const {
      data: { order, setting }
    } = await orderDetail(+this.orderId)
    this.order = order
    this.setting = setting
  },
  methods: {
    // 复制
    copy () {
      // writeText将内容写入到剪切板
      navigator.clipboard
        .writeText(this.order.order_no)
        .then(() => {
          // 写入成功
          Toast('复制成功')
        })
        .catch(() => {
          // 写入失败
          Toast('复制失败')
        })
    },
    cancelOrder () {
      Dialog.confirm({
        title: '确定取消该订单吗?'
      })
        .then(async () => {
          try {
            await cancelOrder(this.orderId)
            Toast('取消订单成功')
          } catch (error) {
            Toast('取消订单失败')
          }
        })
        .catch(() => {
          // 取消订单
        })
    }
  }
}
</script>

<style lang="less" scoped>
.order-detail {
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
  background-color: #f4f4f4;
  // 订单详情头部-待发货
  .nav-bar {
    background-color: #e8c269;
    border: 0;
  }
  // 详情头部
  .detail-header {
    height: 300px;
    line-height: 300px;
    background-color: #e8c269;
    img {
      margin: 4%;
      float: left;
      width: 185px;
      height: 175px;
    }
    h3 {
      color: #fff;
      font-size: 23px;
    }
  }

  // 订单内容
  .order-content {
    max-height: 150vw;
    overflow: auto;

    // 统一的卡片设置
    .common-card {
      margin: 10px 16px;
      padding: 16px;
      background-color: #fff;
      border-radius: 15px;
    }

    // 收货人地址
    .address-detail {
      margin-top: -55px;
      .info {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }
      .detail {
        color: #a59fb1;
      }
    }

    // 订单信息
    .order-detail {
      td {
        padding: 0px 5px;
      }

      tr {
        height: 50px;
      }

      // 每行的第一个单元格设置橙色
      tr > td:first-child {
        // background-color: orange;
        color: #a59fb1;
      }
      .copy_btn {
        height: 26px;
        border-radius: 13px;
        padding: 0px 10px;
      }
    }

    // 订单金额
    // 订单金额统一样式设置
    .common-hd {
      height: 50px;
      line-height: 50px;
    }

    // 订单金额
    .price-hd {
      border-bottom: 1px solid rgb(243, 240, 240);
    }

    .real {
      height: 50px;
      line-height: 50px;
      text-align: right;
      .real_content {
        margin-right: 10px;
      }
    }
  }

  // 订单底部
  .order-footer {
    position: fixed;
    right: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;

    .footer_btn {
      margin-top: 3.666vw;
      margin-right: 20px;
      float: right;
      padding: 0px 4vw;
      height: 36px;
      border-radius: 18px;
    }
  }
}
</style>
